<template>
    <div class="wrapper">
        <header>
            <font-awesome-icon icon="fa-solid fa-angle-left" @click="goBack" />
            <p>体检报告</p>
            <div></div>
        </header>

        <nav>
            <div :class="{ active: activeTab }" @click="setActiveTab(0)">总检结论</div>
            <div :class="{ active: activeTab === 1 }" @click="setActiveTab(1)">报告详情</div>
        </nav>

        <div class="top-ban"></div>

        <div class="nav-content-item" v-show="activeTab === 0">
            <!-- 总检结论内容 -->
            <div class="item">
                <div class="title">异常项</div>
                <ul>
                    <li v-for="(item, index) in myReportDetail.reportOverall.errors" :key="index">
                        <div class="indications">
                            <div class="left">
                                <div>异</div>
                                <p>{{ item.name }}</p>
                            </div>
                            <div class="right">
                                <p>{{ item.value }}</p>
                                <p>正常值范围：{{ item.normalValueString }}</p>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
            <!-- <div class="item" v-for="(result, index) in myReportDetail.reportOverall.overallResults" :key="index">
                <div class="title">{{ result.title }}</div>
                <ul>
                    <li v-for="(content, i) in result.contents" :key="i" class="conclusion-content">
                        <h3>{{ content.subtitle }}</h3>
                        <p>{{ content.description }}</p>
                    </li>
                </ul>
            </div> -->
            <div class="item">
                <div class="title">一、尊敬的顾客，您本次体检结论如下：</div>
                <ul>
                    <li class="conclusion-title">1、超重</li>
                    <li class="conclusion-title">2、血压增高</li>
                    <li class="conclusion-title">3、血常规异常</li>
                </ul>
            </div>
            <div class="item">
                <div class="title">二、尊敬的顾客，您本次体检建议信息日下：</div>
                <ul>
                    <li class="conclusion-content">
                        <h3>1、超重</h3>
                        <p>
                            您的体重指标属超重。体内脂肪过度增加，使体重超过正常范围，可引起高血压、高血脂、糖尿病、冠心病以及免疫功能降低等并发症。
                            建议: 合理膳食，以低盐、低脂、高纤维为原则；三餐定时，不吃零食；根据自身情况适量运动，以消耗体内脂肪，维持正常体重。
                        </p>
                    </li>
                    <li class="conclusion-content">
                        <h3>2、血压增高</h3>
                        <p>
                            此次检测血压增高，已经达到高血压的诊断标准，建议就诊心血管内科进一步明确高血压诊断，积极控制好血压。低盐、低脂、低胆固醇饮食。
                            戒烟酒，避免情绪激动，长期过度紧张工作或劳累，保存心境平和，保证充足睡眠。定期到医院系统复查，预防并发症。
                        </p>
                    </li>
                    <li class="conclusion-content">
                        <h3>3、血常规异常</h3>
                        <p>
                            此次检测白细胞减少，将会导致免疫功能的下降。建议就诊做进一步诊断。
                            同时注意：胆固醇高不要吃油的，甜的，多吃水果和蔬菜，多吃富含蛋白质的食物，如牛奶和豆奶。注意锻炼，坚持每天三次，超过10分钟，中等强度，每周锻炼不少于5次。
                        </p>
                    </li>
                </ul>
            </div>
        </div>

        <div class="nav-content-item" v-show="activeTab === 1">
            <!-- 报告详情内容 -->
            <div v-for="(section, index) in reportDetails" :key="index" class="item">
                <div class="title">{{ section.title }}</div>
                <ul>
                    <li v-for="(item, i) in section.items" :key="i">
                        <div class="indications">
                            <div class="left">
                                <p>{{ item.name }}</p>
                            </div>
                            <div class="right">
                                <p>{{ item.value }}</p>
                                <p>正常值范围：{{ item.normalRange }}</p>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>

        <div class="bottom-ban"></div>
        <Footer />
    </div>
</template>


<script setup>
import Footer from '@/components/Footer.vue';
import { useRouter, useRoute } from 'vue-router';
import axios from '../plugin/axiosInstance';
import { reactive, ref, onMounted } from 'vue';

const router = useRouter();
const route = useRoute();
const activeTab = ref(0);

const myReportDetail = reactive({
    orderId: route.query.orderId,
    reportDetails: [],
    reportOverall: {
        errors: [],
        overallResults:[],
    },
});

const setActiveTab = (index) => {
    activeTab.value = index;
};

const goBack = () => {
    history.go(-1);
};

const getMyReport=()=>{
    axios.get('/report/getReportDetail/' + myReportDetail.orderId).then((res) => {
        if (res.data.code == 200) {
            const reportDetails=res.data.data.reportDetails;
            reportDetails.forEach(detail=>{
                myReportDetail.reportDetails.push(detail);
            })
             
            myReportDetail.reportOverall.errors = res.data.data.reportOverall.errors;
            myReportDetail.reportOverall.overallResults = res.data.data.reportOverall.overallResults;

        }
    });
};


const init = () => {
    getMyReport();
}

init();
</script>

<style scoped>
@import '@/assets/css/report.css';
</style>